<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>章节</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script type="text/javascript" src="../../plugins/wangEditor/wangEditor.min.js"></script>
</head>
<style>
    .tags-line {
        display: inline-block;
    }

    .addBookfrom {
        width: 100%;
    }

    .form-group {
        /*width:auto;*/
        height: 50px;
        padding: 0px;
    }

    .form-group>div {
        height: 100%;
    }

    .col-sm-6,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-9 {
        padding-right: 0;
    }
</style>

<body>
    <div id="rrapp" v-cloak>

        <div class="book-info" style="margin:10px 0">
        </div>


        <div v-show="showDom == 'list'">
            <div class="grid-btn">
                当前书籍: 《{{bookinfo.bookname}}》
                <div class="btn-group" role="group" aria-label="...">
                    <a class="btn btn-primary btn-sm" @click="back">
                        <i class="fa fa-back"></i>&nbsp;返回上一页</a>
                    <a v-if="hasPermission('sys:book:savesection')" class="btn btn-primary btn-sm" @click="addsection">
                        <i class="fa fa-pencil-square-o"></i>&nbsp;添加章节</a>
                    <a v-if="hasPermission('sys:book:writesection')" class="btn btn-primary btn-sm" @click="addsection2">
                        <i class="fa fa-pencil-square-o"></i>&nbsp;作者写书</a>
                    <a v-if="hasPermission('sys:section:update')" class="btn btn-primary btn-sm" @click="updateSectionBtn"><i class="fa fa-pencil-square-o"></i>&nbsp;修改章节</a>

                    <a class="btn btn-primary btn-sm" @click="del">
                        <i class="fa fa-trash-o"></i>&nbsp;删除</a>
                </div>
            </div>
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>

        <div v-show="showDom == 'update'">
                <div class="panel-heading">
                    当前书籍:{{bookinfo.bookname}} 当前章节ID:{{ updateSectionInfo.id }}
                    <div class="btn-group" role="group" aria-label="...">
                        <a class="btn btn-primary btn-sm" @click="showDom = 'list'">
                            <i class="fa fa-back"></i>&nbsp;返回列表</a>
                    </div>
                </div>
                <form class="form-horizontal addBookfrom" style="display: flex;">
                    
                        <div style="flex: 2;display: flex;align-items: center;margin-right: 20px;">
                            <div style="min-width: 50px;">章节</div>
                            <input type="text" class="form-control" v-model="updateSectionInfo.sectionname" placeholder="章节名称" />
                        </div>
                        <div style="flex: 2;display: flex;align-items: center;margin-right: 20px;">
                            <div style="min-width: 50px;">内容</div>
                            <input type="file" ref="updateSection" id="updateSection" name="updateSection" class="form-control"  />
                        </div>
                        <!---->
                        <div style="flex: 1;display: flex;align-items: center;margin-right: 20px;">
                            <div style="min-width: 50px;">价格</div>
                            <input class="form-control" style="width:70px" type="text" v-model="updateSectionInfo.totalfee" ref="bookPrice" value="0" placeholder="单位:元">
                        </div>

                        <div style="flex: 1;display: flex;align-items: center;margin-right: 20px;">
                        <div class="col-sm-2 control-label">所属卷</div>
                        <div class="col-sm-10">
                            <select v-model="updateSectionInfo.volumeId" style="width: 200px">
                                <option selected  value="">请选择</option>
                                <option v-for="sel in sels" v-bind:value="sel.id">{{sel.volumeName}}</option>
                            </select>
                        </div>
                        </div>
    
                    <div style="margin-left: 20px" class="form-group tags-line">
                        <!--<div class="col-sm-2 control-label"></div>-->
                        <input type="button" class="btn btn-primary" @click="submitFormUpdateSection($event)" value="保存修改" /> &nbsp;&nbsp;
                    </div>
                </form>
            </div>


        <div v-show="showDom == 'addSec'">
            <div class="panel-heading">
                当前书籍:{{bookinfo.bookname}}
                <div class="btn-group" role="group" aria-label="...">
                    <a class="btn btn-primary btn-sm" @click="showDom = 'list'">
                        <i class="fa fa-back"></i>&nbsp;返回列表</a>
                </div>
            </div>
            <form class="form-horizontal addBookfrom">
                <div class="form-group">
                    <div style="width: 100px;padding-top: 1px;" class="col-sm-2 control-label">书籍名称</div>
                    <div class="col-sm-10">
                        <label>{{bookinfo.bookname}}</label>
                    </div>
                </div>

                <div v-for="(one,index) of inputs" style="display: flex;margin-bottom: 10px;">

                    <div style="flex: 2;margin-right: 20px;display: flex;align-items: center">
                        <div style="min-width: 50px;">章节</div>
                        <input type="text" class="form-control" v-model="one.sectionname" placeholder="章节名称" />
                    </div>
                    <div style="flex: 2;margin-right: 20px;display: flex;align-items: center">
                        <div style="min-width: 50px;">文章</div>
                        <input type="file" ref="inputfile" id="testfile" name="testfile" class="form-control" @change="getFile($event)" />
                    </div>
                    <div style="flex: 1;margin-right: 20px;display: flex;align-items: center">
                        <div style="min-width: 50px;">价格</div>
                        <input class="form-control" style="width:70px" type="number" v-model="one.bookPrice" ref="bookPrice" value="0" placeholder="单位:元">
                    </div>

                    <div style="flex: 1;display: flex;align-items: center;margin-right: 20px;">
                        <div class="col-sm-2 control-label">所属卷</div>
                        <div class="col-sm-10">
                            <select v-model="one.volumeId" style="width: 200px">
                                <option selected="selected" value="">请选择</option>
                                <option v-for="sel in sels" v-bind:value="sel.id">{{sel.volumeName}}</option>
                            </select>
                        </div>
                    </div>


                    <!--<div class="form-group tags-line col-sm-3">-->
                        <!--<div class="col-sm-4 control-label" style="width: 75px;height: 35px;">章节</div>-->
                        <!--<div class="col-sm-8">-->
                            <!--<input type="text" class="form-control" v-model="one.sectionname" placeholder="章节名称" />-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group tags-line col-sm-3">-->
                        <!--<div class="col-sm-4 control-label" style="width: 75px;height: 35px;">文章</div>-->
                        <!--<div class="col-sm-8">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!---->
                    <!--<div class="form-group tags-line col-sm-2" style="width: 176px;">-->
                        <!--<div class="col-sm-4 control-label" style="width: 75px;height: 35px;">价格</div>-->
                        <!--<div class="col-sm-8" style="padding: 0px;width: 70px;">-->
                            <!--<input class="form-control" style="width:70px" type="number" v-model="one.bookPrice" ref="bookPrice" value="0" placeholder="单位:元">-->

                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group tags-line col-sm-1" style="width: 176px;">-->
                        <!--<div class="col-sm-4 control-label" style="width: 75px;height: 35px;">排序：</div>-->
                        <!--<div class="col-sm-8" style="padding: 0px;width: 70px;">-->
                            <!--<input class="form-control" style="width:70px" type="number" v-model="one.bookNumber" ref="bookNumber" value="0">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!---->
                    <!--<div class="form-group tags-line col-sm-3">-->
                        <!--<div class="col-sm-4 control-label" style="width: 75px;height: 35px;"></div>-->
                        <!--<div class="col-sm-8">-->
                            <!--&lt;!&ndash;<input type="checkbox" ref="freeButton" v-model="one.checkbox" class="freeButton" name="freeButton" />&ndash;&gt;-->
                        <!--</div>-->
                    <!--</div>-->
                </div>

                <div style="margin-left: 20px" class="form-group tags-line">
                    <!--<div class="col-sm-2 control-label"></div>-->
                    <input type="button" class="btn btn-primary" @click="submitForm($event)" value="确定" /> &nbsp;&nbsp;
                    <input type="button" class="btn btn-warning" @click="reload" value="返回" />
                </div>
            </form>
        </div>

        <div v-show="showDom == 'addbook'">
            <div class="panel-heading">
                当前书籍:{{bookinfo.bookname}}
                <div class="btn-group" role="group" aria-label="...">
                    <a class="btn btn-primary btn-sm" @click="showDom = 'list'">
                        <i class="fa fa-back"></i>&nbsp;返回列表</a>
                </div>
            </div>
            <form class="form-horizontal addBookfrom">

                <div style="flex: 2;display: flex;align-items: center;margin-right: 20px;">
                    <div style="min-width: 50px;">章节</div>
                    <input type="text" class="form-control" v-model="updateSectionInfo.sectionname" placeholder="章节名称" />
                </div>
                <div style="flex: 1;display: flex;align-items: center;margin-right: 20px;">
                    <div style="min-width: 50px;">价格</div>
                    <input class="form-control" style="width:70px" type="text" v-model="updateSectionInfo.totalfee" ref="bookPrice" value="0" placeholder="单位:元">
                </div>
                <div style="flex: 1;display: flex;align-items: center;margin-right: 20px;">
                    <div class="col-sm-2 control-label" style="width: 50px;padding-left: 0;text-align: left">所属卷</div>
                    <div class="col-sm-10" style="padding-top: 7px;">
                        <select v-model="updateSectionInfo.volumeId" style="width: 200px">
                            <option selected  value="">请选择</option>
                            <option v-for="sel in sels" v-bind:value="sel.id">{{sel.volumeName}}</option>
                        </select>
                    </div>
                </div>

                <div class="typingArea">
                <div id="editor" class="toolbar">
                </div>
                <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
                <div id="typingLand" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->

                </div>
                </div>
                <div style="margin-left: 20px" class="form-group tags-line">
                    <!--<div class="col-sm-2 control-label"></div>-->
                    <input type="button" class="btn btn-primary" @click="submitFormUpdateSection2($event)" value="保存修改" /> &nbsp;&nbsp;
                </div>
            </form>
        </div>



    </div>
    <script src="../../js/modules/sys/section.js"></script>
</body>

</html>